<template>
    <div class="doorTipBox">
        <div class="doors">
            <div class="bgb">
                <ul class="doorList wrapfix">
                    <li><h2>1号门</h2></li>
                    <li class="open"><h2>2号门</h2><img src="/images/dr1.png"/></li>
                    <li><h2>3号门</h2></li>
                    <li class="kong"><h2>屏幕</h2></li>
                </ul>
                <div class="wzbox">
                    <span>左侧</span>
                    <span>右侧</span>
                </div>
            </div>
        </div>
        <div class="btnBox">
            <span class="btn" @click="done">再次开柜</span>
            <span class="btn solid" @click="done">继续{{type==1?'存放':'取件'}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props:['type'],  // 1为存放，2为取件
    setup(props,context) {
       const done = flag =>{
           context.emit('done',1)
       } 

       return{
           done
       }
    },
}
</script>

<style lang="scss" scoped>
    .doorTipBox{
        .doors{
            width: 612px;
            height: 300px;
            background: #549dfe;
            border-radius:10px ;
            margin: 0 auto;
            padding: 11px 15px;
            .bgb{
                background: #fff;
                width: 100%;
                height: 100%;
                border-radius:10px ;
            }
            .doorList{
                li{
                    float: left;
                    width: 140px;
                    height: 223px;
                    background: #549dfe;
                    border-radius:5px ;
                    margin: 4px 0 0 4px;
                    padding: 24px 0 0 0;
                    h2{
                        height: 40px;
                        line-height: 40px;
                        font-size: 30px;
                        font-weight: 600;
                        text-align: center;
                        color: #fff;
                    }
                    img{
                        display: block;
                        width: 92px;
                        margin: 0 auto;
                        margin-top: 24px;
                        display: none;
                    }
                    &.open{
                        background: #276ecc;
                        img{
                            display: block;
                        }
                    }
                    &.kong{
                        padding-top: 0;
                        background: url(/images/dr2.png) left top no-repeat;
                        background-size:100% 100% ;
                        h2{
                            line-height: 223px;
                            color: #549dfe;
                        }
                    }
                }
            }
            .wzbox{
                height: 42px;
                width: 100%;
                line-height: 42px;
                span{
                    float: left;
                    width: 285px;
                    font-size: 26px;
                    font-weight: bold;
                    color: #fff;
                    text-align: center;
                    background: #549dfe;
                    margin: 4px 0 0 4px;
                    &:first-child{
                        border-top-left-radius:5px ;
                        border-bottom-left-radius:5px ;
                    }
                    &:last-child{
                        border-top-right-radius:5px ;
                        border-bottom-right-radius:5px ;
                    }
                }
            }
        }
        .btnBox{
            text-align: center;
            padding: 38px 0 0 0;
            .btn{
                display: inline-block;
                width: 300px;
                height: 80px;
                line-height: 76px;
                border: 2px solid #549dfe;
                text-align: center;
                font-size: 30px;
                color: #549dfe;
                border-radius: 10px;
                &.solid{
                    background: #549dfe;
                    color: #fff;
                    margin-left:26px
                }
            }
        }
    }
</style>